import React from 'react';
import {Button, Icon, message} from 'antd';
import {WeaDialog, WeaSearchGroup, WeaFormItem, WeaInput, WeaTable} from 'ecCom';
import {WeaLocaleProvider} from 'ecCom';
const getLabel = WeaLocaleProvider.getLabel;
import {WeaMaterialLib} from 'weaPortalPublic';

// 图片元素详细设置
export default class Content_picture_detail extends React.Component {
    state = {
        eImageSource: this.props.eImageSource
    };

    constructor(props) {
        super(props);
        this.getButtons = this.getButtons.bind(this);
        this.onOk = this.onOk.bind(this);
        this.onCancel = this.onCancel.bind(this);
    }

    render() {
        const columns = [{
            title: getLabel(74, '图片'),
            dataIndex: 'src',
            width: '40%',
            render: (text, record) => (
                <div className="wea-url" style={{marginTop: '-4px'}}><WeaMaterialLib value={text} onChange={this.onDetailChange.bind(this, record.key, 'src')}/></div>
            )
        }, {
            title: getLabel(22931, '图片名称'),
            dataIndex: 'title',
            width: '15%',
            render: (text, record) => (
                <div className="wea-url"><WeaInput value={text} onChange={this.onDetailChange.bind(this, record.key, 'title')}/></div>
            )
        }, {
            title: getLabel(22932, '图片链接'),
            dataIndex: 'link',
            width: '25%',
            render: (text, record) => (
                <div className="wea-url"><WeaInput value={text} onChange={this.onDetailChange.bind(this, record.key, 'link')}/></div>
            )
        }, {
            title: getLabel(88, '顺序'),
            dataIndex: 'orderNum',
            width: '10%',
            render: (text, record) => (
                <div className="wea-url"><WeaInput value={text} onChange={this.onDetailChange.bind(this, record.key, 'orderNum')}/></div>
            )
        }, {
            title: getLabel(30585, '操作'),
            dataIndex: 'operation',
            width: '10%',
            render: (text, record) => (
                <div className="wea-url"><span onClick={this.onDetailDelete.bind(this, record.key)}><a href="javascript:void" style={{textDecoration: 'none'}}>{getLabel(91, '删除')}</a></span></div>
            )
        }];

        return (
            <WeaDialog
                className="portal-esetting-dialog"
                visible={true}
                title={getLabel(19342, '详细设置')}
                icon="icon-coms-portal"
                iconBgcolor='#1a57a0'
                style={{width: 660, height: 426}}
                zIndex={1000}
                hasScroll={true}
                buttons={this.getButtons()}
                onCancel={this.onCancel}
            >
                <WeaSearchGroup
                    title={getLabel(22930, '图片来源')}
                    needTigger={true}
                    showGroup={true}
                    customComponent={
                        <Button type="primary" style={{borderRadius: 0, padding: '0 4px'}} onClick={this.onDetailAdd.bind(this)}>
                            <Icon type="plus" style={{color: '#fff'}}/>
                        </Button>
                    }
                >
                    <WeaTable columns={columns} dataSource={this.state.eImageSource} pagination={false}/>
                </WeaSearchGroup>
            </WeaDialog>
        );
    }

    getButtons() {
        let buttons = [];
        buttons.push(<Button type="primary" onClick={this.onOk}>{getLabel(826, '确定')}</Button>);
        buttons.push(<Button type="ghost" onClick={this.onCancel}>{getLabel(31129, '取消')}</Button>);
        return buttons;
    }

    onDetailChange(key, type, value) {
        const {eImageSource} = this.state;
        eImageSource[key][type] = value;
        this.setState({eImageSource: eImageSource});
    }

    onDetailDelete(key) {
        const {eImageSource} = this.state;
        for (let i = 0, len = eImageSource.length; i < len; i++) {
            if (eImageSource[i].key == key) {
                eImageSource.splice(i, 1);
                break;
            }
        }
        this.setState({eImageSource: eImageSource});
    }

    onDetailAdd() {
        const {eImageSource} = this.state;
        eImageSource.push({key: eImageSource.length, src: '', title: '', link: '', orderNum: '0'});
        this.setState({eImageSource: eImageSource});
    }

    onOk() {
        this.props.onOk(this.state.eImageSource);
    }

    onCancel() {
        this.props.onCancel();
    }
}
